<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		
	</style>
	<body>
		<canvas id="canvas" style="position:absolute;top:0px;left:0px;z-index:1;"></canvas> 
	</body>
</html>
<script src="new_file.js" type="text/javascript">
	
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	// canvas.width = canvas.parentNode.offsetWidth;
	// canvas.height = canvas.parentNode.offsetHeight;
	canvas.width = window.innerHeight;
	canvas.height =window.innerHeight;
	
	//如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout  
	window.requestAnimFrame = (function() {
		return window.requestAnimationFrame ||
			window.webkitRequestAnimationFrame ||
			window.mozRequestAnimationFrame ||
			function(callback) {
				window.setTimeout(callback, 1000 / 60);
			};
	})();
	//初始角度为0  
	var step = 0;
	//定义三条不同波浪的颜色  
	var lines = ["rgba(0, 170, 255, 0.2)",
		"rgba(0, 170, 255, 0.2)",
		"rgba(0, 170, 255, 0.2)"
	];
	
	function loop() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		step++;
		//画3个不同颜色的矩形  
		for (var j = lines.length - 1; j >= 0; j--) {
			ctx.fillStyle = lines[j];
			//每个矩形的角度都不同，每个之间相差45度  
			var angle = (step + j * 45) * Math.PI / 180;
			var deltaHeight = Math.sin(angle) * 50;
			var deltaHeightRight = Math.cos(angle) * 50;
			ctx.beginPath();
			ctx.moveTo(0, canvas.height / 2 + deltaHeight);
			ctx.bezierCurveTo(canvas.width / 2, canvas.height / 2 + deltaHeight - 50, canvas.width / 2, canvas.height / 2 +
				deltaHeightRight - 50, canvas.width, canvas.height / 2 + deltaHeightRight);
			ctx.lineTo(canvas.width, canvas.height);
			ctx.lineTo(0, canvas.height);
			ctx.lineTo(0, canvas.height / 2 + deltaHeight);
			ctx.closePath();
			ctx.fill();
		}
		requestAnimFrame(loop);
	}
	loop();
</script>